<template>
    <div>
        <aside class="l_box">
            <sort/>
            <search/>
            <phone/>
            <recom/>
            <login/>
        </aside>
        <main class="r_box">

            <li v-for="(a,index) in article_list" :key="index"><i><a :href="a.id"><img :src="a.o_img"></a></i>
                <h3><a :href="'/info.html/' + a.id">{{a.title}}</a></h3>
                <p>{{a.content}}</p>
            </li>

            <template v-if="this.$store.state.userIslogin === true">
                <el-button type="text" @click="$router.push('/new_article.html')">新增文章</el-button>
            </template>

            <page :total="total" @pageChange="pageChange"></page>
            <!--
            当前页数 和 总条目数 ：{{currval}}
            {{sort_id}}
            -->

            {{sort_id}}

        </main>
    </div>
</template>

<script>
    import {getArticleList, getArticleList_Id} from "../service/getData";

    export default {
        name: "list",
        data() {
            return {
                //接收action/1，这种参数
                sort_id: this.$route.params.sort_id,
                //接收action?a=1&b=1，this.$route.query.VALUE
                article_list: [
                    {
                        id: 1,
                        author: "hzh",
                        changetime: "22/12/2018",
                        content_id: 1,
                        count_good: 1,
                        count_view: 1,
                        createtime: "22/12/2018",
                        content: "内容",
                        o_img: "/image/7.jpg",
                        sort_id: 100,
                        title: "第二篇内容",
                        a_url: 102
                    }
                ],
                // 总记录数
                total: 100,
                currval: 1,
            }
        },
        methods: {
            pageIndex: function () {
                if (this.sort_id === undefined){
                    getArticleList(this.currval).then((res) => {
                        this.article_list = res.data.content;
                        this.total = res.data.totalPages;
                    });
                }else {
                    getArticleList_Id(this.sort_id,this.currval).then((res) => {
                        this.article_list = res.data.content;
                        this.total = res.data.totalPages;
                    });
                }
            },
            // 页码切换，子组件，在这里触发，并传入分页的参数
            pageChange: function (item) {
                this.currval = item.pageCurrent;
                getArticleList(this.currval).then((res) => {
                    this.article_list = res.data.content;
                    this.total = res.data.totalPages;
                })
            },
        },
        mounted() {
            this.pageIndex();
        },
    }
</script>
